<template>
    <div class="bar-wrap">
        <div class="left">
            <img :src="logo" alt="logo" @click="() => router.push('/')" />
        </div>
        <div class="right">
            <div class="item" :class="{
                active: route.path == i.path,
            }" v-for="i in routes" :key="i.meta?.title" @click="() => router.push(i.path)
    ">
                {{ i.meta?.title }}
            </div>
        </div>
    </div>
</template>
<script setup lang="ts">
import logo from "@/status/logo.png"

import { routes } from '../../router'
import { useRoute, useRouter } from 'vue-router'

const route = useRoute()

const router = useRouter()


</script>
<style lang="scss">
.bar-wrap {
    position: fixed;
    z-index: 99;
    display: flex;
    justify-content: space-between;
    background: #fff;
    width: 100vw;
    height: 10vh;
    padding: 0 5%;

    .left {
        width: 30%;
        display: flex;
        align-items: center;
        justify-content: center;
        cursor: pointer;

        img {
            height: 40px;
        }
    }

    .right {
        width: 70%;
        display: flex;

        .item {
            display: flex;
            align-items: center;
            justify-content: center;
            text-align: center;
            margin: 0 5%;
            cursor: pointer;
        }

        .item.active,
        .item:hover {
            color: #307ed6;
        }
    }
}
</style>
